<template>
	<view class="tui-product-box">
		<tn-sticky>
			<!-- 只能有一个根元素 -->
			<view class="" style="background: linear-gradient(to right, #fa7850, #e9203d);display: flex;align-items: center;color: #fff;padding: 20rpx 20rpx 30rpx 20rpx;flex-direction: column;">
				<view class="" style="height: 145rpx;width: 100%;"></view>
				<view class="" style="display: flex;width: 100%;align-items: center;">
					<text class="tn-icon-left" style="font-size: 58rpx;" @click="back"></text>
					<view class="" style="background: rgb(201, 13, 19);display: flex;align-items: center;width: 100%;border-radius: 50rpx;">
						<image src="../../static/taob.png" mode="widthFix" style="width: 80rpx;height: 80rpx;"></image>
					
						<view class="" v-if="up" style="display: flex;font-size: 30rpx;">
							任务完成
						</view>
						<view class="" style="display: flex;align-items: center;" v-else>
							<view class="" style="margin-left: 20rpx;font-size: 30rpx;">滑动浏览	<tn-count-down :showMinutes="false" ref="countDown" @end="end" :autoplay="false" :showHours="false" :timestamp="timestamp" backgroundColor="none" fontColor="#fff"></tn-count-down>秒</view>
							<image src="../../static/taob.png" mode="widthFix" style="width: 50rpx;height: 50rpx;"></image>
							<view class="">+200</view>
						</view>
					</view>
				</view>
			</view>
		</tn-sticky>
		<view class="tui-product-list" style="margin-top: 50rpx;">
			<view class="tui-product-container">
				<block v-for="(item, index) in list" :key="index" v-if="(index + 1) % 2 != 0">
					<!--商品列表-->
					<view class="tui-pro-item" hover-class="hover" :hover-start-time="150" @tap="detail(item)">
						<image :src="info.app.cdnurl+ item.image" class="tui-pro-img" lazy-load mode="widthFix" />
						<view class="tui-pro-content">
							<view class="tui-pro-tit">{{ item.title }}</view>
							<view>
								<view class="tui-pro-price">
									<text class="tui-sale-price"
										v-if="item.price && item.price[0]>0">￥{{ item.price[0] }}+</text>
									<text class="tui-sale-price"  v-if="item.is_coin==1" style="font-size: 24rpx;margin-left: 20rpx;">红包省{{item.coin_price }}元</text>
								</view>
							</view>
							<view class=""
								style="display: flex;justify-content: space-between;align-items: center;margin-top: 10rpx;">
								<view class="" style="font-size: 26rpx;color: #c4c4c4;">库存{{item.stock}}</view>
							</view>
						</view>
					</view>
					<!--商品列表-->
					<!-- <template is="productItem" data="{{item,index:index}}" /> -->
				</block>
			</view>
			<view class="tui-product-container">
				<block v-for="(item, index) in list" :key="index" v-if="(index + 1) % 2 == 0">
					<!--商品列表-->
					<view class="tui-pro-item" hover-class="hover" :hover-start-time="150" @tap="detail(item)">
						<image :src="info.app.cdnurl+ item.image" class="tui-pro-img" lazy-load mode="widthFix" />
						<view class="tui-pro-content">
							<view class="tui-pro-tit">{{ item.title }}</view>
							<view>
								<view class="tui-pro-price">
									<text class="tui-sale-price"
										v-if="item.price && item.price[0]>0">￥{{ item.price[0] }}+</text>
								<text class="tui-sale-price"  v-if="item.is_coin==1" style="font-size: 24rpx;margin-left: 20rpx;">红包省{{item.coin_price }}元</text>
								</view>
								<view class=""
									style="display: flex;justify-content: space-between;align-items: center;margin-top: 10rpx;">
									<view class="" style="font-size: 26rpx;color: #c4c4c4;">库存{{item.stock}}</view>
								</view>
							</view>
						</view>
					</view>
					<!--商品列表-->
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getScoreshopList,
		getActivitySigninIncScore,
		getGoodsIds
	} from "@/apis/index.js"
	export default {
		data() {
			return {
				timestamp:30,
				list_rows: 10,
				page: 1,
				list: [],
				last_page: '',
				up:false,
				num:1
			}
		},
		async onLoad(option) {
			
			let {
				code,
				data
			} = await getGoodsIds(option.ids)
			if (code == 1) {
				this.list = data
			}
			
		
			this.getDataList()
			let ress = this.getDataMonth()
			let month = uni.getStorageSync('months')
			
			if(ress != month ){
				this && this.$tn.vuex('numTotal',0)
				this.$refs.countDown.start();
				return
			}
			if (month && ress == month && this.numTotal>=5) {
				this.up=true
			}else{
				setTimeout(()=>{
					this.$refs.countDown.start();
				})
			}
			
		},
		onPageScroll() {
			console.log(123)
		},
		onReachBottom() {
			if (this.page < this.last_page) {
				this.page++
				this.getDataList()
			}
		},
		methods: {
			async end(){
				this.up=true
				
				let res = await getActivitySigninIncScore(200)
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				console.log(this.numTotal)
				let numTotal=this.numTotal+1
				this && this.$tn.vuex('numTotal',numTotal)
				let ress = this.getDataMonth()
				uni.setStorage({
					key: 'months',
					data: ress
				})
			},
			getDataList() {
				// getScoreshopList(this.list_rows, this.page).then(res => {
				// 	console.log(res)
				// 	this.list = [...this.list, ...res.data.data]
				// 	this.last_page = res.data.last_page
				// })
			},
			detail(item) {
				uni.navigateTo({
					url: `/templatePage/productDetail/productDetail?index=${item.id}`
				});
			},
			getDataMonth() {
				const date = new Date();
				const year = date.getFullYear();
				const month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份要加1，且补零处理
				const day = ('0' + date.getDate()).slice(-2); // 补零处理
				let currentDate = `${year}-${month}-${day}`
				return currentDate
			},
			back(){
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tui-product-box {
		// margin-top: 20rpx;
		// padding: 0 25rpx;
		box-sizing: border-box;
		background: #f2f2f2;
		min-height: 100vh;
	}



	.tui-size-sm {
		font-size: 24rpx;
		line-height: 24rpx;
		transform: scale(0.8);
		transform-origin: 0 50%;
	}

	.tui-original__pri {
		font-size: 24rpx;
		line-height: 24rpx;
		color: #999999;
		transform-origin: center 10%;
		transform: scale(0.8);
		display: flex;
		align-items: center;
		justify-content: center;
		text-decoration: line-through;
	}

	/*秒杀商品*/

	.tui-more__box {
		display: flex;
		align-items: center;
		font-weight: 400;
		color: #999;
	}

	.tui-more__box text {
		font-size: 24rpx;
		line-height: 24rpx;
	}

	.tui-new-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.tui-new-item {
		width: 49%;
		height: 180rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background: #f5f2f9;
		position: relative;
		border-radius: 12rpx;
	}

	.tui-new-mtop {
		margin-top: 2%;
	}

	.tui-title-box {
		font-size: 24rpx;
	}

	.tui-new-title {
		font-size: 26rpx;
		line-height: 32rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}



	.tui-new-label {
		width: 56rpx;
		height: 56rpx;
		border-top-left-radius: 12rpx;
		position: absolute;
		left: 0;
		top: 0;
	}

	.tui-title__img {
		width: 100%;
		padding: 30rpx 0;
		display: flex;
		justify-content: center;
	}

	.tui-title__img image {
		width: 352rpx;
		height: 32rpx;
	}

	.tui-product-list {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		/* padding-top: 20rpx; */
	}

	.tui-product-container {
		flex: 1;
		margin-right: 2%;
	}

	.tui-product-container:last-child {
		margin-right: 0;
	}

	.tui-pro-item {
		width: 100%;
		margin-bottom: 4%;
		background: #fff;
		box-sizing: border-box;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.tui-pro-img {
		width: 100%;
		display: block;
	}

	.tui-pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.tui-pro-tit {
		color: #2e2e2e;
		font-size: 26rpx;
		line-height: 32rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-pro-price {
		padding-top: 10rpx;
	}

	.tui-sale-price {
		font-size: 28rpx;
		font-weight: 500;
		color: #e41f19;
	}

	.tui-factory-price {
		font-size: 28rpx;
		color: #e41f19;
		// padding-left: 12rpx;
	}

	.tui-pro-pay {
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #656565;
	}


	.unicorn-font-size {
		font-size: 35rpx;
		font-weight: 700;
	}

	.unicorn-border-radius-swiper {
		border-radius: 10px;
	}

	.unicorn-body {
		padding: 0rpx 15rpx;
	}

	.unicorn-image {
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 10rpx;
	}
</style>